<!--数据查询列表组件  -->
<template>
  <div :span="20" style="padding: 0px 15px;" class="MessagePanel">
    <div class="topButton">
      <div class="name">
        <p class="classNme">数据查询</p>
        <p class="smallClassName">DATA INFOMATION QUERY</P>
      </div>
    </div>
    <!-- 两个el-tabs用来切换历史数据和实时数据下的各个数据项  -->
    <div class="data-record-view-container">
      <el-tabs type="border-card" @tab-click="checkTabs" v-model="bigLabel">
        <el-tab-pane label="历史数据" name="History"/>
        <el-tab-pane label="实时数据" name="RealTime"/>
      </el-tabs>
      <div style="display: flex;">
        <el-tabs tab-position="left" @tab-click="checkTabs" v-model="smallLabel" class="dataTables">
          <el-tab-pane label="水表" name="Water-1"/>
          <el-tab-pane label="电表" name="Electric-2"/>
          <el-tab-pane label="热量表" name="Heat-4"/>
          <el-tab-pane label="时间采样仪" name="Sampling-11"/> <!--。。。。。。-->
          <el-tab-pane label="流量计" name="FlowMeter-5"/>
          <el-tab-pane label="温控仪" name="Temperature-9"/>

          <el-tab-pane label="VAV温控计" name="VAVTemperature-11"/>
          <el-tab-pane label="冷热表" name="HeatingCoolingMeter-6"/>
          <el-tab-pane label="阀门" name="Valve-7"/>
          <el-tab-pane label="制冷主机" name="RefrigeratingMachine-12"/>
          <el-tab-pane label="冷却塔" name="CoolingTower-3"/>
          <el-tab-pane label="水泵" name="WaterPump-8"/>
        </el-tabs>
        <div class="dataShowView">
          <!-- 动态加载数据项组件 -->
          <component :is="dynamicComponent" :ref="dynamicComponent" @getData="queryAction"></component>
        </div>
      </div>
    </div>
  </div>
</template>

<script>


let component;
/* 引入所有的数据项组件  */
import HistoryElectric from './HistoryElectric.vue';
import HistoryWater from './HistoryWater.vue';
import HistoryGas from './HistoryGas.vue';
import HistoryHeat from './HistoryHeat.vue';
import HistoryFlowMeter from './HistoryFlowMeter.vue';
import HistoryTemperature from './HistoryTemperature.vue';
import HistorySampling from './HistorySampling.vue';
import RealTimeWater from './RealTimeWater.vue';
import HistoryVAVTemperature from "./HistoryVAVTemperature.vue";
import HistoryHeatingCoolingMeter from "./HistoryHeatAndCoolMeter.vue";
import HistoryValve from "./HistoryValve.vue";
import HistoryRefrigeratingMachine from "./HistoryRefrigeratingMachine.vue";
import HistoryCoolingTower from "./HistoryCoolingTower.vue";
import HistoryWaterPump from "./HistoryWaterPump.vue";

import RealTimeCoolingTower from "./RealTimeCoolingTower.vue";
import RealTimeElectric from "./RealTimeElectric.vue";
import RealTimeFlowMeter from "./RealTimeFlowMeter.vue";
import RealTimeHeat from "./RealTimeHeat.vue";
import RealTimeHeatingCoolingMeter from "./RealTimeHeatingCoolingMeter.vue";
import RealTimeRefrigeratingMachine from "./RealTimeRefrigeratingMachine.vue";
import RealTimeSampling from "./RealTimeSampling.vue";
import RealTimeTemperature from "./RealTimeTemperature.vue";
import RealTimeValve from "./RealTimeValve.vue";
import RealTimeVAVTemperature from "./RealTimeVAVTemperature.vue";
import RealTimeWaterPump from "./RealTimeWaterPump.vue";

import {nextTick} from 'vue';
//TODO 当前只添加了历史数据项组件 还需添加实时数据项组件

export default {
  data() {
    return {
      bigLabel: 'History',
      smallLabel: 'Water-1',
      dynamicComponent: null,//需要动态加载的数据项名字段
    };
  },
  components: {
    RealTimeCoolingTower,
    RealTimeElectric,
    RealTimeFlowMeter,
    RealTimeHeat,
    RealTimeHeatingCoolingMeter,
    RealTimeRefrigeratingMachine,
    RealTimeSampling,
    RealTimeTemperature,
    RealTimeValve,
    RealTimeVAVTemperature,
    RealTimeWaterPump,
    HistoryVAVTemperature,
    HistoryElectric,
    HistoryWater,
    HistoryGas,
    HistoryHeat,
    HistoryFlowMeter,
    HistoryTemperature,
    HistorySampling,
    RealTimeWater,
    HistoryHeatingCoolingMeter,
    HistoryValve,
    HistoryRefrigeratingMachine,
    HistoryCoolingTower,
    HistoryWaterPump
  },


  methods: {
    handleClick() {
    },
    interceptDigit() {
      let index = component.smallLabel.indexOf("-");
      let stringData = component.smallLabel.substring(0, index);
      let numData = component.smallLabel.substring(index + 1, component.smallLabel.length)
      return [stringData, numData]
    },
    async checkTabs(tab, event) {//两个tabs的触发事件
      await nextTick();//等待DOM刷新完成 否则的话dataViewName 无法及时更新bigLabel和smallLabel
      let smallLabelList = component.interceptDigit();
      component.dynamicComponent = component.bigLabel + smallLabelList[0];
      await nextTick();//等待DOM刷新完成，等待共用组件加载完成 否则的话无法获取$refs中的组件对象
      this.queryAction();
    },
    setSelRanges(queryIds, rangeId) {
      component.rangeIds = queryIds;
      component.rangeId = rangeId;
      component.checkTabs();
    },
    async queryAction() {
      let smallLabelList = component.interceptDigit();
      let showTableView = component.$refs[component.dynamicComponent];//获取动态组件对象
      const queryParams = showTableView.queryParams;//获取动态组件对象的参数
      if (component.bigLabel === "History") {
        let response = await component.$asyncPost("data", {
          actionType: component.dynamicComponent,
          rangeIds: component.rangeIds,
          startTime: queryParams.dateRange[0],
          endTime: queryParams.dateRange[1],
          type: queryParams.dateType,
        });
        if (response.success) {
          showTableView.dataList = response.dataList;
        } else {
          component.$message.error(response.message)
        }
      } else {
        //进行查询判断
        let response = await component.$asyncPost("device", {
          actionType: "deviceRealTimeInfo",
          rangeIds: component.rangeIds,
          deviceType: smallLabelList[1],
        });
        if (response.success) {
          showTableView.deviceInfoList = response.deviceInfoList;
          showTableView.deviceNoList = response.deviceNoList;
        } else {
          component.$message.error(response.message)
        }
      }
    }
  },
  mounted() {
    component = this;
  }
}

</script>
<style lang='scss'>
.data-record-view-container {
  padding-top: 20px;
  height: 740px;
}

.dataShowView {
  width: 100%;
  height: 600px;
  overflow: hidden;
}
</style>


<!--<template>
  <div :span="20" style="padding: 0px 15px;" class="MessagePanel">
    <div class="topButton">
      <div class="name">
        <p class="classNme">数据查询</p>
        <p class="smallClassName">DATA INFOMATION QUERY</P>
      </div>
    </div>
    &lt;!&ndash;    &lt;!&ndash; 两个el-tabs用来切换历史数据和实时数据下的各个数据项  &ndash;&gt;&ndash;&gt;
    <div class="data-record-view-container">
      <el-tabs type="border-card" @tab-click="checkTabs" v-model="bigLabel">
        <el-tab-pane label="历史数据" name="History"/>
        <el-tab-pane label="实时数据" name="RealTime"/>
      </el-tabs>
      <div style="display: flex; ">
        <el-tabs tab-position="left" @tab-click="checkTabs" v-model="smallLabel" class="dataTables">
          <el-tab-pane label="水表" name="Water"/>
          <el-tab-pane label="电表" name="Electric"/>
          <el-tab-pane label="燃气表" name="Gas"/>&ndash;&gt;
          <el-tab-pane label="热量表" name="Heat"/>
          <el-tab-pane label="采样仪" name="Sampling"/>
          <el-tab-pane label="流量计" name="FlowMeter"/>
          <el-tab-pane label="温控计" name="Temperature"/>

          <el-tab-pane label="VAV温控计" name="VAVTemperature"/>
          <el-tab-pane label="冷热表" name="HeatingCoolingMeter"/>
          <el-tab-pane label="阀门" name="Valve"/>
          <el-tab-pane label="制冷主机" name="RefrigeratingMachine"/>
          <el-tab-pane label="冷却塔" name="CoolingTower"/>
          <el-tab-pane label="水泵" name="WaterPump"/>
        </el-tabs>
        <div class="dataShowView">
          <history-dta-show ref="history_dta_show"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>


let component;
/* 引入所有的数据项组件  */

import HistoryDtaShow from "./HistoryDtaShow.vue";
import {nextTick} from 'vue';
import {deviceTableOBJ} from "../../../utils/deviceTable";
//TODO 当前只添加了历史数据项组件 还需添加实时数据项组件

export default {
  data() {
    return {
      bigLabel: 'History',
      smallLabel: 'Water',
      dynamicComponent: null,//需要动态加载的数据项名字段
    };
  },

  components: {
    HistoryDtaShow
  },


  methods: {
    handleClick() {
    },
    async checkTabs(tab, event) {//两个tabs的触发事件
      await nextTick();//等待DOM刷新完成 否则的话dataViewName 无法及时更新bigLabel和smallLabel
      component.dynamicComponent = component.bigLabel + component.smallLabel;
      await nextTick();//等待DOM刷新完成，等待共用组件加载完成 否则的话无法获取$refs中的组件对象
      this.queryAction()
    },
    setSelRanges(queryIds, rangeId) {
      component.rangeIds = queryIds;
      component.rangeId = rangeId;
      component.queryAction();
    },
    async queryAction() {
      let showTableView = component.$refs.history_dta_show;//获取动态组件对象
      const queryParams = showTableView.queryParams;//获取动态组件对象的参数
      if (component.bigLabel === "History") {
        let response = await component.$asyncPost("data", {
          actionType: component.dynamicComponent,
          rangeIds: component.rangeIds,
          startTime: queryParams.dateRange[0],
          endTime: queryParams.dateRange[1],
          type: queryParams.dateType,
        });
        if (response.success) {
          showTableView.dataList = response.dataList;
          showTableView.tableColumn = deviceTableOBJ[component.dynamicComponent];
        } else {
          component.$message.error(response.message)
        }
      } else {
        let response = await component.$asyncPost("device", {
          actionType: "deviceRealTimeInfo",
          rangeIds: component.rangeIds,
          deviceType: 1,
        });
        if (response.success) {
          showTableView.deviceInfoList = response.deviceInfoList;
          showTableView.deviceNoList = response.deviceNoList;
        } else {
          component.$message.error(response.message)
        }
      }
    }
  },
  mounted() {
    component = this;
    component.checkTabs();
  }
}

</script>
<style lang='scss'>
.data-record-view-container {
  padding-top: 20px;
  height: 740px;
}

.dataShowView {
  width: 100%;
  height: 580px;
  overflow: hidden;
}
</style>-->
